<template>
	<div style="height: 100%;">
		<div id="echarts" v-show="alarmLineShow"></div>
		<div class="none" v-show="!alarmLineShow">
			<image src="../../static/img/no-alarm.png" mode=""></image>
			<div>七天内暂无报表</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		props: {
			deptId: {
				type: Number,
				default: 0
			},
			buildId: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				statisticsTimeList: [],
				isDept: uni.getStorageSync('userDept').isDept,
				alarmLineShow:true
			}
		},
		mounted() {
			this.init()
		},
		methods:{
			async init(){
				let res = await this.$api.getLatestdaysAlarmLines({
					deptId: this.deptId,
					isDept: 0,
					buildId: this.buildId,
					type: 1
				})
				let isalarmNumberList=0
				res.data.alarmNumberList.forEach(v=>{
					if(v>0){
						isalarmNumberList++
					}
				})
				let isfaultNumberList=0
				res.data.faultNumberList.forEach(v=>{
					if(v>0){
						isfaultNumberList++
					}
				})
				let isofflineNumberList=0
				res.data.offlineNumberList.forEach(v=>{
					if(v>0){
						isofflineNumberList++
					}
				})
				if(isalarmNumberList===0&&isfaultNumberList===0&&isofflineNumberList===0){
					this.alarmLineShow=false
					return false
				}else{
					this.alarmLineShow=true
				}
				this.$nextTick(function(){
					var myChart = echarts.init(document.getElementById("echarts"))
					var option = {
						legend: {
							icon: 'rect',
							itemWidth: 20,
							itemHeight: 5,
							data: [{
									name: '故障',
									itemStyle: {
										color: "rgba(254, 169, 64, 1)"
									},
									textStyle: {
										color: 'rgba(254, 169, 64, 1)'
									}
					
								},
								{
									name: '报警',
									itemStyle: {
										color: "rgba(255, 61, 61, 1)"
									},
									textStyle: {
										color: 'rgba(255, 61, 61, 1)'
									}
								},
								{
									name: '离线',
									itemStyle: {
										color: "rgba(203, 206, 220, 1)"
									},
									textStyle: {
										color: 'rgba(203, 206, 220, 1)'
									}
					
					
								}
							],
						},
						grid: {
							left: '8%',
							right: '8%',
							bottom: '3%',
							top: '20%',
							containLabel: true
						},
						xAxis: [{
							type: 'category',
							boundaryGap: false,
							data: res.data.statisticsTimeList
						}],
						yAxis: {
							type: 'value',
							splitLine: {
								show: true,
								lineStyle: {
									type: 'dotted',
									color: 'rgba(255, 255, 255, 0.1)'
								}
							},
							splitNumber: 5
						},
						series: [{
								name: '报警',
								data: res.data.alarmNumberList,
								type: 'line',
								symbol: 'none', //取消折点圆圈
								smooth: true, //折线平滑
								areaStyle: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: 'rgba(255, 61, 61, 0.5)'
										},
										{
											offset: 0.5,
											color: 'rgba(255, 61, 61, 0.2)'
					
										},
										{
											offset: 1,
											color: 'rgba(255, 61, 61, 0.1)'
										}
									])
								},
								lineStyle: { // 线条样式
									color: {
										colorStops: [{
											offset: 0,
											color: 'rgba(255, 61, 61, 0.8)',
										}, {
											offset: 1,
											color: 'rgba(255, 61, 61, 0.1)'
										}],
									},
									width: 1, // 线条粗细
									shadowOffsetY: 12, // 阴影线条的偏移量
									shadowColor: 'rgba(59, 138, 254, 0.1)' // 阴影线条的颜色
								},
							},
							{
								name: '离线',
								data: res.data.offlineNumberList,
								symbol: 'none', //取消折点圆圈
								smooth: true, //折线平滑
								type: 'line',
								areaStyle: {
					
									color: [{
											offset: 0,
											color: 'rgba(203, 206, 220, 0.3)'
										},
										{
											offset: 0.5,
											color: 'rgba(203, 206, 220, 0.1)'
										},
										{
											offset: 1,
											color: 'rgba(203, 206, 220, 0)'
										}
									]
								},
								lineStyle: { // 线条样式
									color: {
										colorStops: [{
											offset: 0,
											color: 'rgba(203, 206, 220, 1)',
										}, {
											offset: 1,
											color: 'rgba(203, 206, 220, 0.3)'
										}],
									},
									width: 1, // 线条粗细
									shadowOffsetY: 12, // 阴影线条的偏移量
									shadowColor: 'rgba(59, 138, 254, 0.1)' // 阴影线条的颜色
								},
							},
							{
								name: '故障',
								data: res.data.faultNumberList,
								type: 'line',
								symbol: 'none', //取消折点圆圈
								smooth: true, //折线平滑
					
								areaStyle: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: 'rgba(254, 169, 64, 0.3)'
										},
										{
											offset: 0.5,
											color: 'rgba(254, 169, 64, 0.2)'
										},
										{
											offset: 1,
											color: 'rgba(254, 169, 64, 0.1)'
										}
									])
								},
								lineStyle: { // 线条样式
									color: {
										colorStops: [{
												offset: 0,
												color: 'rgba(254, 169, 64, 0.3)',
											},
											{
												offset: 0.5,
												color: 'rgba(254, 169, 64, 1)',
											},
											{
												offset: 1,
												color: 'rgba(254, 169, 64, 0.3)'
											}
										],
									},
									width: 1, // 线条粗细
									shadowOffsetY: 12, // 阴影线条的偏移量
									shadowColor: 'rgba(59, 138, 254, 0.1)' // 阴影线条的颜色
								},
							}
						]
					};
					
					myChart.setOption(option)
					window.addEventListener("resize", ()=>{
						myChart.resize()
					});
				})
			},
		},
		watch: {
		    buildId(val) {
		      if (val) {
				this.init()
		      }
		    }
		},
		
	}
</script>

<style lang="scss" scoped>
	#echarts {
		width: 100%;
		height: 100%;
	}
	.none{
		
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		font-size: 14px;
		color: rgba(255, 255, 255, 0.7);
		height: 100%;
		image{
			width: 132px;
			height: 78px;
		}
	}
</style>
